<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>展示商品</title>
    <script>
  
    </script>
</head>
<body>
   
    <table border="1" align="center" cellpadding="10">
        <thead>
            <tr>
                <th>
                   <label for="selectAll">
                    全选:
                    <input type="checkbox" id="selectAll">
                </th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
    <div>
        <input type="button" id="deleAll" value="删除所选">
        商品总价（不含运费）：<label id="total" class="yellow"></label> 元
    </div>
</body>
<script>
 
    function $(ele){return document.querySelector(ele);}
    function c(ele){return document.createElement(ele);}
    $('#selectAll').onclick=function(){
            let oInput=document.getElementsByClassName("checkbox1");
            for(let i=0;i<oInput.length;i++){
                oInput[i].checked=this.checked;
            }
            jisuan();
        }

    // 改变商品数量
	function changeNum(ope,index){
		let shop = document.getElementsByClassName('shop_num');
		if(ope == '-'){
            if(+shop[index].value-1<1){
				alert('不能小于1');
				return;
			}else{
                shop[index].value = +shop[index].value-1;
                jisun();
            }
			
		}else{
			
			shop[index].value = +shop[index].value+1;
            jisuan();
		}
	}

    function storageFn(){
        
        let trs = $('#tb').getElementsByTagName('tr');
        if( trs.length ){
            for( let i=trs.length-1;i>=0;i-- ){
                $('#tb').removeChild(trs[i])
            }
        }

        let shop_data = JSON.parse(localStorage.getItem('shop_data'));
        for( let i=0;i<shop_data.length;i++ ){
            // 创建行tr
            let tr = c('tr');
            // 创建select td
            let td_sel = c('td');
            let checkbox = c('input');
            
            checkbox.type = 'checkbox';
            checkbox.className='checkbox1'
            td_sel.appendChild(checkbox);

            // 创建商品名称td
            let td_product_name = c('td');
            td_product_name.innerText = shop_data[i].product_name;

            // 商品单价td
            let td_product_price = c('td');
            td_product_price.innerText = shop_data[i].product_price;

            //商品数量td
            let td_product_num = c('td');
            // 减少商品数量按钮
            let minusBtn = c('input');
            minusBtn.type = 'button';
            minusBtn.value = '-';
            // 增加商品数量按钮
            let plusBtn = c('input');
            plusBtn.type = 'button';
            plusBtn.value = '+';
            // 显示商品数量input
            let input_product_num = c('input');
            input_product_num.className = 'shop_num';
            input_product_num.value = shop_data[i].product_num;
            input_product_num.readonly = true;
            // 为增加和减少商品数量按钮绑定事件
            minusBtn.addEventListener('click',function(){
                changeNum('-',i)
            },false);
            plusBtn.addEventListener('click',function(){
                changeNum('+',i)
            },false);
            td_product_num.appendChild(minusBtn);
            td_product_num.appendChild(input_product_num);
            td_product_num.appendChild(plusBtn);

            // 小计td
            let td_subtotal = c('td');
            td_subtotal.innerText = shop_data[i].product_num*shop_data[i].product_price;

            // 操作td
            let td_del = c('td');
            // 创建删除按钮
            let delBtn = c('input');
            delBtn.type='button';
            delBtn.value = '删除';
            delBtn.onclick = function(){
                $('#tb').removeChild(this.parentNode.parentNode);
                shop_data.splice(i,1);
                localStorage.setItem('shop_data',JSON.stringify(shop_data));
            }
            td_del.appendChild(delBtn);

            tr.appendChild(td_sel);
            tr.appendChild(td_product_name);
            tr.appendChild(td_product_price);
            tr.appendChild(td_product_num);
            tr.appendChild(td_subtotal);
            tr.appendChild(td_del);

            $('#tb').appendChild(tr);
            jisuan();
        }
    }
    storageFn();
    window.addEventListener('storage',storageFn,false)
    $('#deleAll').onclick=function(){
        let oInput=document.getElementsByClassName("checkbox1");
        let tr=$('#tb').getElementsByTagName('tr')
        
        //console.log($('deleAll'));
        for(var i=oInput.length-1;i>=0;i--){
          // console.log(oInput);
            if(oInput[i].checked){
                //console.log(oInput[i])
                //console.log(oInput[i].checked);
              
                //console.log(tr);
                $('#tb').removeChild(tr[i]);
            //    dele();
            
        }jisuan();
    }
}
       

    jisuan();
    function jisuan(){
            var number;
            var jiage;
            var sum=0;
            var hang=$('#tb').getElementsByTagName('tr');
            // console.log(hang.length);
            for(var j=0;j<hang.length;j++){
                        // console.log(hang[j].getElementsByTagName('td').length);
                        number=hang[j].getElementsByTagName('td')[3].getElementsByTagName('input')[1].value;
                        //console.log(number);
                        jiage=hang[j].getElementsByTagName('td')[2].innerText*number;
                         //console.log(jiage);
                        hang[j].getElementsByTagName('td')[4].innerText=jiage;
                        //console.log(hang[j].getElementsByTagName('td')[4].innerText);
                        sum+=jiage;
                         console.log(sum);
                    
            }
                $('#total').innerText=sum;
            
    }

    // 
</script>
</html>